<template>
	<view class="">
		<view class="charts-box">
			<qiun-data-charts :canvas2d="true" type="pie" :opts="opts" :chartData="chartData" />
		</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :opts="lineOpts" :chartData="lineData" />
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted
	} from 'vue'
	// import Empty from '../../components/empty.vue';
	// 点击tabs切换的小标
	const currentIndex = ref(0)
	// 饼状图数据
	const chartData = reactive({
		series: [{
			data: [{
				"name": "呼吸系统疾病",
				"value": 50,
			}, {
				"name": "循环系统疾病",
				"value": 30
			}, {
				"name": "消化系统疾病",
				"value": 20
			}, {
				"name": "内分泌系统疾病",
				"value": 18
			}],
		}]
	})
	// 饼状图配置项
	const opts = reactive({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [20, 20, 20, 20],
		margin: [5, 5, 5, 5],
		enableScroll: false,
		legend: { // 图例配置项
			show: true, // 是否显示图例，默认值为true // 图例的位置，可以是'rect'（矩形区域，如右侧或左侧）、'top'（顶部）、'bottom'（底部）等
			text: '我的自定义图例标题', // 图例的文本内容，这里可以设置为你想要的图例标题
			textStyle: { // 文本样式配置项
				color: '#000', // 字体颜色
				fontSize: '10px' // 字体大小
			}
		},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	})
	// 折线图数据
	const lineData = reactive({
		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
		series: [{
				name: "呼吸系统疾病",
				data: [15, 45, 15, 45, 15, 45]
			},
			{
				name: "循环系统疾病",
				data: [55, 85, 55, 85, 55, 85]
			},
			{
				name: "消化系统疾病",
				data: [95, 125, 95, 125, 95, 125]
			},
			{
				name: "内分泌系统疾病",
				data: [35, 45, 95, 25, 95, 25]
			}
		]
	})
	const lineOpts = reactive({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 0, 15],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data: [{
				min: 0,
				max: 150
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			}
		}
	})

	const clicktabFn = (index, item) => {
		currentIndex.value = index
	}
	onMounted(() => {

	})
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>